<template>
  <div>
    <ul class="tab-group">
      <li @click="checkTab(0)" :class="{'active': tabIndex == 0}">项目详情</li>
      <li @click="checkTab(1)" :class="{'active': tabIndex == 1}">项目进展</li>
      <li @click="checkTab(2)" :class="{'active': tabIndex == 2}">捐款记录</li>
    </ul>

    <!-- 项目详情 -->
    <div class="content" v-if="tabIndex == 0">
      <h1>{{project.title}}</h1>
      <div v-html="project.content"></div>
    </div>

    <!-- 项目进展 -->
    <div class="content" v-if="tabIndex == 1">
      <div v-if="progressList.length > 0">
        <div v-for="(item, index) in progressList" :key="index">
          <h1>{{item.name}}</h1>
          <div v-html="item.description"></div>
        </div>
        <div class="f-ptp20 f-pbt20" v-if="totalCount > 0">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            background
            :total="totalCount"
          ></el-pagination>
        </div>
      </div>
      <div v-else>暂无进展数据！</div>
    </div>

    <!-- 捐款记录 -->
    <div class="content" v-if="tabIndex == 2">
      <el-table :data="recordList" border style="width: 541px">
        <el-table-column prop="money" label="捐款金额" width="180"></el-table-column>
        <el-table-column prop="mobileNo" label="用户手机" width="180"></el-table-column>
        <el-table-column prop="createTime" label="发生时间" width="180">
          <template slot-scope="scope">
            <span>{{tranDate(scope.row.createTime)}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="f-ptp20 f-pbt20" v-if="recordTotalCount > 0">
        <el-pagination
          @current-change="handleRecordCurrentChange"
          :current-page.sync="recordCurrentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          background
          :total="recordTotalCount"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PublicProjectDetail",
  //   props: {
  //     show: {
  //       type: Boolean,
  //       default: false
  //     }
  //   },
  data() {
    return {
      tabIndex: 0,
      projectId: null,
      project: {},
      progressList: [], // 项目进度列表
      recordList: [], // 捐款记录列表
      pageSize: 10,
      currentPage: 1,
      totalCount: 0,
      recordTotalCount: 0, // 捐款记录总数
      recordCurrentPage: 1 // 捐款记录当前页
    };
  },
  created() {
    if (this.$route.params.id) {
      this.projectId = this.$route.params.id;
      this.getProjectDeatail(this.projectId);
      this.getProjectProgressList();
      this.getRecord();
    }
  },
  methods: {
    tranDate(date) {
      return this._utils.format(date, 'yyyy-mm-dd')
    },
    // tab 切换
    checkTab(index) {
      this.tabIndex = index;
    },
    getRecord() {
      this.$store
        .dispatch("GET_DONATION_RECORD", {
          projectId: this.projectId,
          pageNum: this.recordCurrentPage - 1,
          pageSize: this.pageSize
        })
        .then(res => {
          if (res.data.retCode == 0) {
            this.recordList = res.data.data.list;
            console.log('this.recordList:::', this.recordList);
            this.recordTotalCount = res.data.data.totalCount;
          } else {
            res.data.errorMsg && this.$message.warning(res.data.errorMsg);
          }
        });
    },
    // 获取项目详情
    getProjectDeatail(projectId) {
      this.$store
        .dispatch("GET_PROJECT_DETAIL", {
          id: projectId
        })
        .then(res => {
          if (res.data.retCode == 0) {
            console.log(res);
            this.project = res.data.data;
          } else {
            res.data.errorMsg && this.$message.warning(res.data.errorMsg);
          }
        });
    },

    // 获取项目进度列表
    getProjectProgressList() {
      this.$store
        .dispatch("GET_PROJECT_PROGRESS_LIST", {
          projectId: this.projectId,
          pageNum: this.currentPage - 1,
          pageSize: this.pageSize
        })
        .then(res => {
          if (res.data.retCode == 0) {
            console.log("list::", res);
            this.progressList = res.data.data;
            this.totalCount = res.data.totalCount;
          } else {
            res.data.errorMsg && this.$message.warning(res.data.errorMsg);
          }
        });
    },

    handleRecordCurrentChange(page) {
      this.recordCurrentPage = page;
      this.getRecord();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getProjectProgressList();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tab-group {
  padding-top: 30px;
}
.content {
  margin-top: 30px;
}
.content h1 {
  padding-bottom: 20px;
}
.tab-group {
  display: flex;
}
.tab-group > li {
  padding: 8px 20px;
  border: 1px solid #ddd;
  margin-right: 20px;
  border-radius: 6px;
  cursor: pointer;
}
.tab-group > .active {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}
</style>
